<template>
  <div>
    <div class="list-item">
      <div class="item-avatar">
        <el-avatar :size="50" fit="cover" :src="message.avatar" />
      </div>
      <div class="item-container">
        <div class="item-header">
          <div class="item-header-left">
            <p class="left-username">
              <span :id="message.messageId" class="current-username">
                {{ message.username }}
              </span>
              <el-link
                v-show="message.parentUsername"
                type="primary"
                :underline="false"
                :href="'#' + message.messageId"
                class="parent-username"
              >
                @{{ message.parentUsername }}
              </el-link>
            </p>
            <p class="left-device">
              <span class="device-platform">
                <i class="el-icon-third-win" />
                <span>{{ message.system }}</span>
              </span>
              <span class="device-browser">
                <i class="el-icon-third-chrome" />
                <span>{{ message.browser }}</span>
              </span>
            </p>
          </div>
          <div class="item-header-right">
            <time class="right-date">{{ message.createTime }}</time>
          </div>
        </div>
        <p class="item-main">{{ message.content }}</p>
        <div class="item-footer">
          <span>
            <i class="el-icon-third-dianzan" />
            <span>{{ message.likes }}</span>
          </span>
          <span @click="onReply(message.messageId)">
            <i class="el-icon-third-huifu" />
            <span>
              {{ getMessageId === message.messageId ? "取消回复" : "回复" }}
            </span>
          </span>
          <span>
            <i class="el-icon-third-cai" />
            <span>踩</span>
          </span>
          <span>
            <i class="el-icon-third-jubao" />
            <span>举报</span>
          </span>
        </div>
        <Markdown
          v-if="getMessageId === message.messageId"
          :username="message.username"
          class="item-reply"
        />
      </div>
    </div>
    <ul v-if="message.list && message.list.length > 0" class="list-item-reply">
      <li v-for="subItem of message.list" :key="subItem.messageId">
        <CommentItem :message="subItem" />
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Markdown from "$components/editor/Markdown";
export default {
  name: "CommentItem",
  components: {
    Markdown,
  },
  props: {
    message: {
      type: Object,
      required: true,
    },
  },
  computed: {
    ...mapGetters(["getMessageId"]),
  },
  methods: {
    onReply(messageId) {
      this.$store.commit("setMessageId", messageId);
    },
  },
};
</script>

<style lang="stylus" scoped>
.list-item {
  display: flex;
}

.item-avatar {
  width: 8%;
}

.item-container {
  width: 92%;
  font-size: 0.14rem;
}

.item-header {
  display: flex;
  justify-content: space-between;
}

.left-username {
  font-weight: bold;
}

.current-username {
  margin-right: 0.05rem;
}

.left-device, .left-device i[class*="el-icon-third-"] {
  color: #999;
  font-size: 0.12rem;
}

.left-device i[class*="el-icon-third-"] {
  margin-right: 0.05rem;
}

.device-platform {
  margin-right: 0.1rem;
}

.item-header-right {
  color: #8590a6;
  display: flex;
  align-items: center;
}

.item-main {
  padding: 0.1rem 0;
}

.item-footer > span {
  color: #8590a6;
  font-size: 0.16rem;
  margin-right: 0.1rem;
  transition: all 0.3s;
}

.item-footer span:hover * {
  color: var(--colorLevel1) !important;
  cursor: pointer;
}

.item-footer i[class*="el-icon-third-"] {
  color: #8590a6;
  font-size: 0.16rem;
  margin-right: 0.05rem;
  transition: all 0.3s;
}

.item-reply {
  margin-top: 0.2rem;
}

.list-item-reply {
  margin-top: 0.2rem;
  margin-left: 0.65rem;
}
</style>